import React, {Component} from 'react'
import Dimensions from 'react-dimensions'
import {fetchData} from '../../components/AjaxConsumer'
import ProductModalTable from './productmodalTable'

import {
    Form,
    Input,
    Tooltip,
    Icon,
    Cascader,
    Select,
    Row,
    Col,
    Checkbox,
    Button,
    message,
    Modal,
    Radio
} from 'antd';
const RadioGroup = Radio.Group;
const FormItem = Form.Item;
const Option = Select.Option;
const confirm = Modal.confirm;

class ProductComForm extends React.Component {
    state = {
        loading: false,
        edit:false,
        submitUrl:'',
        whCodeList:[],
        formData:{
            groupId:'',
            groupCode:'',
            groupName:'',
            productCode:'',
            productName:'',
            productDescZh:'',
        }
    };
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, fieldsValue) => {
                if (!err) {
                    this.setState({loading: true});
                    let values = {
                        ...fieldsValue,
                    };
                    console.log('表单提交数据-----------',values);
                    //发送ajax 控制请求数据规则，无值的设为空
                    for (let item in values) {
                        if (!values[item]) {
                            values[item] = ''
                        }
                    }
                    const options = {
                        url: this.state.submitUrl,
                        type: 'post',
                        condition: values
                    };
                    fetchData(this, options, (res) => {
                        //回调函数
                        this.setState({
                            loading:false
                        });
                        if (res.code == '1') {
                            message.success('操作成功');
                            
                            this.handleCancel();
                            this.props.refreshHandle();
                        }else{
                            message.error(res.msg);
                        }
                        
                    })
                }
            });
    }

    handleCancel = () => {
        //this.hideModal();
       this.props.onCancel();//123
        this.props.form.resetFields(); //初始化表单
        //初始化ajax加载过来的selectList
    }

    // 修改属性后刷新-n次
    componentWillReceiveProps(nextProps){
        if(nextProps.init){
            //if(this.state.whCodeList.length==0){
                //this.queryWarehousesUnderFactory();
            //}
        }

        console.log('componentWillReceiveProps------',nextProps);

        let tmpFormData = nextProps.formData;
        let url = nextProps.submitUrl;
        if(url=='/base/data/productComb/c'){
            this.setState({
                edit:false
            });
        }
        if(url=='/base/data/productComb/u'){
            this.setState({
                edit:true
            });
        }
        this.setState({
            formData:tmpFormData,
            submitUrl:nextProps.submitUrl
        });
    }
    // 组件参数实例化-仅一次
    componentWillMount(){
        console.log('componentWillMount-----',this.props);
        this.setState({
            submitUrl:this.props.submitUrl,
            formData:this.props.formData
        });
    }
    //初始化页面刷新-仅一次
    componentDidMount(){
        //this.queryWarehousesUnderFactory();

        if(this.props.submitUrl=='/base/data/productComb/u'){
            this.setState({
                edit:true,
            });
        } else {
            this.setState({
                edit:false,
            });
        }
    }


    workModalTableSearchClick = () =>{
        this.refs.productModalTable.showModal();
    }

    allocationRuleSearchClick = () =>{
        message.warn('当前区域分配规则还未开发');
    }

    // 入库出库弹出模态框的统一回调函数
    getLocationCodeTableData = (resultData) =>{
        // if(resultData.type=='instock'){
        this.props.form.setFieldsValue(
            {
                productCode:resultData.value,
                productName:resultData.name
            }
        );
        // }

    }


    render() {
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 6}
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 14}
            }
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {span: 24,offset: 0},
                sm: {span: 24,offset: 10}
            }
        };
        //一行几个 （总宽度24,）
        const colNumber = 12;//一行2个
        return (
            <div>
                <Form
                    onSubmit={this.handleSubmit}
                    style={{
                    backgroundColor: '#fff',
                    paddingTop: '20px',
                    paddingBottom: '20px'
                }}>
                    <Row>
                        <Col span={0}>
                                <FormItem>
                                    {getFieldDecorator('groupId',{
                                        initialValue: this.state.formData.groupId,
                                        rules: [
                                            {}
                                        ]
                                    })(<Input type="hidden"/>)}
                                </FormItem>
                        </Col>
                        <Col span={colNumber}>
                            <FormItem {...formItemLayout} label="组合编码" hasFeedback>
                                {getFieldDecorator('groupCode', {
                                    initialValue:this.state.formData.groupCode,
                                    rules: [
                                        {
                                            required: true, message: '请输入组合编码!'
                                        },
                                        {
                                            max:64,message: '输入内容应少于64个字符！'
                                        }
                                    ]
                                })(<Input disabled={this.state.edit}/>)}
                            </FormItem>
                        </Col>

                        <Col span={colNumber}>
                            <FormItem {...formItemLayout} label="组合描述" hasFeedback>
                                {getFieldDecorator('groupName', {
                                    initialValue:this.state.formData.groupName,
                                    rules: [
                                        {
                                            required: true, message: '请输入组合描述!'
                                        },
                                        {
                                            max:100,message: '输入内容应少于100个字符！'
                                        }
                                    ]
                                })(<Input />)}
                            </FormItem>
                        </Col>


                        <Col span={colNumber}>
                            <FormItem {...formItemLayout} label="产品编码" hasFeedback>
                                <Row gutter={8}>
                                    <Col span={22}>
                                        {getFieldDecorator('productCode', {
                                            initialValue:this.state.formData.productCode,
                                            rules: [
                                                {
                                                    max:64,message: '输入内容应少于64个字符！'
                                                }
                                            ]
                                        })(
                                            <Input disabled/>
                                        )}
                                    </Col>
                                    <Col span={2}>
                                        <Icon type="search" style={{cursor:'pointer'}} onClick={this.workModalTableSearchClick} />
                                    </Col>
                                </Row>
                            </FormItem>
                        </Col>

                        <Col span={colNumber}>
                            <FormItem {...formItemLayout} label="产品名称" hasFeedback>
                                {getFieldDecorator('productName', {
                                    initialValue:this.state.formData.productName,
                                    rules: [
                                        {
                                            max:100,message: '输入内容应少于100个字符！'
                                        }
                                    ]
                                })(<Input />)}
                            </FormItem>
                        </Col>


                        <Col span={24}>
                            <FormItem {...tailFormItemLayout}>
                                <Button type="primary" htmlType="submit" size="large">{this.state.loading?'提交中...':'确定'}</Button>
                                <Button
                                    type="default"
                                    style={{marginLeft: '50px'}}
                                    size="large"
                                    onClick={this.handleCancel}
                                >
                                    取消
                                </Button>
                            </FormItem>
                        </Col>

                    </Row>
                </Form>


                <ProductModalTable getTableData={this.getLocationCodeTableData} ref='productModalTable' />


            </div>
        );
    }
}

export default Form.create()(ProductComForm);
